import { useEffect, useState } from "react";
import React from 'react';
import "../../css/index.css"
import { Divider, Radio, Image, Spin, Skeleton } from 'antd';
import qian from "../../assets/钱.png"
import cj from "../../assets/成交.png"
import dd from "../../assets/订单.png"
import wc from "../../assets/完成.png"
import { GetStatistics } from "../../api/index";
import { useNavigate } from 'react-router-dom';

import ReactECharts from 'echarts-for-react';


const Index = () => {
    const navigate = useNavigate()

    const [loading, setLoading] = React.useState(false);

    const [value, setValue] = useState();
    const [begin, setBegin] = useState(new Date());
    const [end, setEnd] = useState(new Date(Date.parse(new Date()) + (86400000 * 1)))

    const [shows, setShows] = useState(true);//骨架屏
    const [day, setDay] = useState(1);
    const [dateRange, setDateRange] = useState('今');
    const chartRef = React.useRef(null);

    const onChange = (e) => {
        const val = e.target.value; // 获取Radio的值  
        const displayValue = getDisplayValue(val); // 获取显示文本  
        setDateRange(displayValue); // 更新状态  
        calculateDays(val); // 计算天数  
    };

    const calculateDays = (val) => {
        const datetime = new Date();
        const date = new Date(Date.parse(datetime) - (86400000 * parseInt(val, 10)));
        setBegin(date);
        setDay(parseInt(val, 10));
        BindData();
    };
    const getDisplayValue = (val) => {
        let displayValue;
        switch (val) {
            case '1':
                displayValue = '今天';
                break;
            case '7':
                displayValue = '7天内';
                break;
            case '30':
                displayValue = '30日内';
                break;
            case '90':
                displayValue = '90日内';
                break;
            case '180':
                displayValue = '180日内';
                break;
            case '365':
                displayValue = '1年内';
                break;
            case '-1':
                displayValue = '无限制';
                break;
            default:
                displayValue = val; // 对于其他值，直接显示原值  
        }
        return displayValue;
    };




    //数据统计
    //x轴数据格式:datas:["0点","1点","2点"]
    //y轴数据格式:moneyValues1:["0","0","30424"],
    //y轴数据格式:moneyValues1:["0","0","800"],
    const [banks, setBanks] = useState([]);

    const [bank, setBank] = useState({
        dates: [], // x轴数据  
        moneyValues1: [], // y轴数据  
        moneyValues2: [],
        orderValues1: [],
        orderValues2: []
    });
    const seriesData = bank.dates.map((date, index) => ({
        name: date, // x轴上的名称  
        value: Number(bank.moneyValues1[index]), // y轴上的值，转换为数字  
        value2: Number(bank.moneyValues2[index]),
        value3: Number(bank.orderValues1[index]),
        value4: Number(bank.orderValues2[index]),

    }));
    const BindData = async () => {
        setLoading(true);
        await GetStatistics({ day: day }).then((res) => {
            if (res.result === 0) {
                setBanks(res.data);
                setBank({
                    dates: res.data.dates,
                    moneyValues1: res.data.moneyValues1,
                    moneyValues2: res.data.moneyValues2,
                    orderValues1: res.data.orderValues1,
                    orderValues2: res.data.orderValues2
                })
                setLoading(false)
                setShows(false);
            }
        });
    };

    let option = {
        title: {
            text: `${dateRange}天-销售数据`
        },
        tooltip: { trigger: 'axis' },//鼠标悬浮出现一个弹出框
        legend: {
            data: ['销售金额', '成交金额'] // 图例数据
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },//下载
        xAxis: {
            name: '日期',
            type: 'category',
            boundaryGap: false,
            data: bank.dates,
        },
        yAxis: {
            type: 'value',
            name: '金额(元)',
        },
        series: [
            {
                name: '销售金额',
                type: 'line',
                stack: 'Total',
                data: seriesData.map(item => item.value),
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '成交金额',
                type: 'line',
                stack: 'Total',
                data: seriesData.map(item => item.value2),
            },

        ]
    };
    let options = {
        title: {
            text: `${dateRange}天-订单数据`
        },
        tooltip: { trigger: 'axis' },//鼠标悬浮出现一个弹出框
        legend: {
            data: ['销售金额', '成交金额'] // 图例数据
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },//下载
        xAxis: {
            name: '日期',
            type: 'category',
            boundaryGap: false,
            data: bank.dates,
            label: {
                show: true,
                position: 'top'
            }
        },
        yAxis: {
            type: 'value',
            name: '金额(元)',
        },
        series: [
            {

                type: 'line',
                stack: 'Total',
                data: seriesData.map(item => item.value3),
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {

                type: 'line',
                stack: 'Total',
                data: seriesData.map(item => item.value4),
            },

        ]
    };

    useEffect(() => {
        BindData();
    }, [day])

    return (
        <div className="exam-container">
            <Skeleton loading={shows} active={true} paragraph={{ rows: 10 }} rows={20} style={{ padding: '10px' }}>
                <Spin spinning={loading} delay={500}>
                    <div className="container">
                        <div className="content">
                            <div>
                                <Radio.Group className="radio" onChange={onChange} value={dateRange}>
                                    <Radio value={1} >今日</Radio>
                                    <Radio value={7} >7日内</Radio>
                                    <Radio value={30} >30日内</Radio>
                                    <Radio value={90} >90日内</Radio>
                                    <Radio value={180} >180日内</Radio>
                                    <Radio value={365} >1年内</Radio>
                                    <Radio value={-1} >不限制</Radio>
                                </Radio.Group>
                            </div>
                            <Divider />
                            <div className="index">
                                <div className="">
                                    <div className="order">
                                        <span className="order-count">{`${dateRange}天-销售金额`}</span>
                                        <Divider />
                                        <span className="amount">  <Image src={qian} width={25} style={{ paddingBottom: 10 }} />{Math.ceil(banks.money).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span><span className="amounts">{banks.moneyPercent}%</span>
                                    </div>
                                </div>

                                <div className="">
                                    <div className="order">
                                        <span className="order-count">{`${dateRange}天-成交金额`}</span>
                                        <Divider />
                                        <span className="amount"> <Image src={cj} width={25} style={{ paddingBottom: 10 }} />{Math.ceil(banks.currMoney).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span><span className="amounts">{banks.currMoneyPercent}%</span>
                                    </div>
                                </div>

                                <div className="">
                                    <div className="order">
                                        <span className="order-count">{`${dateRange}天-订单数量`}</span>
                                        <Divider />
                                        <span className="amount"><Image src={dd} width={25} style={{ paddingBottom: 10 }} />{banks.orderCount}</span><span className="amounts">{banks.orderPercent}%</span>
                                    </div>
                                </div>

                                <div className="">
                                    <div className="order">
                                        <span className="order-count">{`${dateRange}天-完成订单`}</span>
                                        <Divider />
                                        <span className="amount"><Image src={wc} width={25} style={{ paddingBottom: 10 }} />{banks.orderCompleteCount}</span><span className="amounts">{banks.completeOrderPercent}%</span>
                                    </div>
                                </div>
                            </div>

                            <Divider />
                            {/* <div id="main" ></div> */}
                            <ReactECharts option={option} style={{ Height: 450 }} />
                            <ReactECharts option={options} style={{ Height: 450 }} />

                        </div>
                    </div>
                </Spin>
            </Skeleton>
        </div>
    )
}


export default Index;